<template>
  <div class="container row">
    <el-card v-for="(item, index) in compList" :key="index" class="box-card">
      <div slot="header" class="clearfix row between">
        <div>
          <span class="font18 bold header"
            >主题：{{ item.groupName == null ? "暂无" : item.groupName }}</span
          >
        </div>
        <div class="center">
          <el-button
            v-if="item.state == 1 && item.tempUrl != ''"
            @click="typeset(item)"
            type="text"
            >智能排版</el-button
          >
        </div>
      </div>
      <div class="font14 item">竞赛类型：{{ item.category }}</div>
      <div class="font14 item">
        比赛时间：{{ item.dateTime | filterTime1 }} -
        {{ item.dateTime | filterTime2 }}
      </div>
      <div class="font14 item">
        竞赛名称：<span class="bold">{{ item.compName }}</span>
      </div>
      <div class="font14 item">
        带队老师：{{ item.teacherName == null ? "暂无" : item.teacherName }}
        <span
          v-if="item.teacherName != null"
          style="color: green; cursor: pointer"
          >老师</span
        >
      </div>
      <div class="font14 item">
        <div v-if="item.registrations.length != 0">
          队伍成员：<el-tag
            style="margin-right: 5px; margin-bottom: 2.5px; margin-top: 2.5px"
            v-for="number in item.registrations"
            :key="number.regId"
            type="info"
            >{{ number.userName }}</el-tag
          >
        </div>
        <div v-else>队伍成员：暂无</div>
      </div>
      <div v-if="!(item.src == '' || item.src == null)" class="font14 item">
        <div>
          <span>商业计划书：</span>
          <!-- <el-button
            type="primary"
            v-if="item.state == 1 && item.tempUrl != ''"
            @click="typeset(item)"
            >提交</el-button
          > -->
          <el-upload
            v-if="item.state == 1 && item.tempUrl != ''"
            class="upload-demo"
            :action="actionUrl"
            :multiple="false"
            :show-file-list="false"
            :on-success="handleSuccess"
          >
            <el-button size="small" type="primary">编辑重传</el-button>
          </el-upload>
        </div>
        <div>
          <el-upload
            action=""
            :on-preview="handlePreview"
            :file-list="item.src | srcFilter"
          >
          </el-upload>
        </div>
      </div>
      <div class="font14 item">
        当前进度：<span style="color: green; cursor: pointer">{{
          item.state | stateFilter
        }}</span>
      </div>
      <el-progress
        :text-inside="true"
        :stroke-width="26"
        :format="formatValue"
        :percentage="item.state | percentageFilter"
      ></el-progress>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "compCard",
  props: {
    compList: {
      type: Array,
      required: false,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      // 上传地址
      actionUrl: process.env.VUE_APP_SERVICE_URL + "/upload/reSubmit",
    };
  },
  filters: {
    filterTime1(list) {
      return list.split(",")[0];
    },
    filterTime2(list) {
      return list.split(",")[1];
    },
    srcFilter(src) {
      var fileList = [];
      fileList.push({
        name: src.split("/")[src.split("/").length - 1],
        url: src,
      });
      return fileList;
    },
    stateFilter(state) {
      if (state == 1) {
        return "准备材料中";
      } else if (state == null) {
        return "等待邀请";
      } else if (state == 2) {
        return "材料审核中";
      } else if (state == 3) {
        return "审核通过";
      }
    },
    percentageFilter(state) {
      if (state == 1) {
        return 25;
      } else if (state == null) {
        return 0;
      } else if (state == 2) {
        return 50;
      } else if (state == 3) {
        return 70;
      }
    },
  },
  methods: {
    typeset(data) {
      this.$emit("typeset", data);
    },
    formatValue(percentage) {},
    // 点击文件列表中已上传的文件时的钩子
    handlePreview(file) {
      console.log(file);
      this.$confirm("此操作将下载该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          window.open(file.url, "_blank");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消下载",
          });
        });
    },
    handleSuccess(response, file, fileList) {
      console.log("上传成功:", response.code);
      if (response.code == 200) {
        this.$message({
          message: "更新成功",
          type: "success",
        });
      } else {
        this.$message({
          message: "提交失败",
          type: "error",
        });
      }
    },
  },
};
</script>

<style scoped>
.container {
  margin: 25px 0;
  flex-wrap: wrap;
}
/* 卡片 */
.item {
  margin-bottom: 18px;
}
.clearfix .header {
  width: 100px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 400px;
  margin: 0 20px 20px 0;
}
</style>